<template>
  <div>
    <span class="el-menu__title">新增用户</span>
    <el-form ref="User" :model="User" label-width="80px"
             :rules="updateUserrulers" label-position="right">
      <el-form-item label="账户" prop="username">
        <el-col :span="4">
          <el-input v-model="User.username" placeholder="请输入用户名" clearable maxlength="15"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-col :span="4">
          <el-input show-password v-model="User.password" placeholder="请输入密码" clearable maxlength="15"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="真实姓名" prop="realname">
        <el-col :span="4">
          <el-input v-model="User.realname" placeholder="请输入姓名"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="性别">
        <el-col :span="4">
          <el-select v-model="User.sex" placeholder="" style="width: 260px">
            <el-option
              v-for="item in options"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="住址" prop="address">
        <el-col :span="4">
          <el-input v-model="User.address" clearable placeholder="请输入住址"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="电话" prop="telephone">
        <el-col :span="4">
          <el-input v-model="User.telephone" clearable placeholder="请入电话" maxlength="15"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-col :span="4">
          <el-input v-model="User.email" clearable placeholder="请输入邮箱"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="国家" prop="country">
        <el-col :span="4">
          <el-input v-model="User.country" clearable placeholder="请输入国家"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="10" style="text-align: right">
          <el-button type="primary" @click="registerUsers()">注册</el-button>
        </el-col>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
    import {postRequest} from "../../utils/api";

    export default {
        name: "RegisterUser",
        data() {
            return {
                User: {
                    username: '',
                    password: '',
                    realname: '',
                    sex: '',
                    address: '',
                    telephone: '',
                    email: '',
                    country: '',


                },
                updateUserrulers: {
                    username: [{required: true, message: '用户名不可为空', trigger: 'blur'}],
                    password: [{required: true, message: '密码不可为空', trigger: 'blur'}],
                    realname: [{required: true, message: '姓名不可为空', trigger: 'blur'}],
                    address: [{required: true, message: '住址不可为空', trigger: 'blur'}],
                    telephone: [{len: 11, required: true, message: '请正确输入电话号码（11位）', trigger: 'blur'}],
                    email: [{type: 'email', required: true, message: '请正确输入邮箱', trigger: 'blur'}],
                    country: [{required: true, message: '国家不可为空', trigger: 'blur'}],
                },
                options: [{
                    value: '男',
                    label: '男'
                }, {
                    value: '女',
                    label: '女'
                },],

            }
        },
        methods: {
            registerUsers() {
                this.$refs.User.validate((valid) => {
                    if (valid) {
                        postRequest(
                            '/user/register',
                            {
                                'username': this.User.username,
                                'password': this.User.password,
                                'realname': this.User.realname,
                                "sex": this.User.sex,
                                'address': this.User.address,
                                'telephone': this.User.telephone,
                                'email': this.User.email,
                                'country': this.User.country
                            }
                        ).then(res => {
                            // 密码修改校验成功
                            if (res && res.flag === '1') {
                                // 保存登录信息
                                this.$message.success(' 用户录入成功');
                                // replace 不可回退  铺设可以
                                //this.$router.push('/Login')
                            } else {
                                this.loading = false
                                // 修改失败
                                this.$message.error(res.msg + '!');
                            }
                        })
                    } else {
                        this.$message.warning('请完整规范填写自身修改信息！');
                        return false;
                    }
                })

            },
            getLoginInfo() {
            }
        },
        mounted() {
            this.getLoginInfo()
        }
    }
</script>

<style scoped>

</style>
